<template>
    <div class="min-h-screen bg-gray-50 font-sans">
        <!-- 顶部导航 -->
        <header class="sticky top-0 z-30 bg-white shadow-sm">
            <div class="container mx-auto px-4 py-4 flex items-center justify-between">
                <button class="text-gray-700 hover:text-pink-500 transition-colors" @click="toUrl('/app')">
                    <i class="fa fa-arrow-left text-xl"></i>
                </button>
                <h1 class="text-lg font-medium text-gray-800">添加案例</h1>
                <div class="w-6"></div> <!-- 占位元素，保持布局平衡 -->
            </div>
        </header>

        <!-- 添加案例表单 -->
        <main class="container mx-auto px-4 py-6">
            <form @submit.prevent="submitCase" class="bg-white p-6 rounded-xl shadow-sm">
                <!-- 案例标题 -->
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="title">
                        案例标题 *
                    </label>
                    <input id="title" v-model="caseForm.title" type="text"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"
                        placeholder="请输入案例标题" required />
                </div>

                <!-- 案例内容 -->
                <div class="mb-6">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="content">
                        案例内容 *
                    </label>
                    <textarea id="content" v-model="caseForm.content" rows="8"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"
                        placeholder="请输入案例详细内容" required></textarea>
                </div>
                <image-upload v-model="caseForm.imageUrl" />

                <!-- 标签选择 -->
                <div class="mb-8">
                    <label class="block text-gray-700 text-sm font-bold mb-2">
                        标签
                    </label>
                    <div class="flex flex-wrap gap-2">
                        <span v-for="tag in availableTags" :key="tag.value" @click="toggleTag(tag.value)"
                            class="px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-all" :class="{
                                'bg-pink-100 text-pink-700 hover:bg-pink-200': selectedTags.includes(tag.value),
                                'bg-gray-100 text-gray-700 hover:bg-gray-200': !selectedTags.includes(tag.value)
                            }">
                            {{ tag.label }}
                        </span>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="flex justify-end space-x-3">
                    <button type="button" @click="resetForm"
                        class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
                        重置
                    </button>
                    <button type="submit" :disabled="isSubmitting"
                        class="px-6 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors disabled:opacity-50">
                        {{ isSubmitting ? '提交中...' : '发布案例' }}
                    </button>
                </div>
            </form>
        </main>
    </div>
</template>

<script>
import { addLibrary } from "@/api/demo/library";

export default {
    data() {
        return {
            caseForm: {
                title: '',
                image: '',
                content: '',
                type: 'Case'
            },
            selectedTags: [],
            availableTags: [
                { label: '胶原蛋白', value: '胶原蛋白' },
                { label: '肌肤修护', value: '肌肤修护' },
                { label: '抗衰保养', value: '抗衰保养' },
                { label: '科学护肤', value: '科学护肤' }
            ],
            isSubmitting: false
        };
    },

    methods: {
        toggleTag(tag) {
            const index = this.selectedTags.indexOf(tag);
            if (index > -1) {
                this.selectedTags.splice(index, 1);
            } else {
                this.selectedTags.push(tag);
            }
        },
        resetForm() {
            this.caseForm = {
                title: '',
                image: '',
                content: '',
                type: 'Case'
            };
            this.selectedTags = [];
        },
        toUrl(url) {
            this.$router.push(url);
        },
        submitCase() {
            if (this.isSubmitting) return;

            this.isSubmitting = true;

            // 构造提交数据
            const submitData = {
                ...this.caseForm,
                tags: this.selectedTags.join(',')
            };

            addLibrary(submitData).then(res => {
                if (res.code == 200) {
                    this.$message.success('案例添加成功！');
                    this.$router.push('/app');
                } else {
                    this.$message.error(res.msg || '添加失败');
                }
            }).catch(err => {
                this.$message.error('添加失败，请稍后重试');
                console.error(err);
            }).finally(() => {
                this.isSubmitting = false;
            });
        }
    }
};
</script>

<style scoped>
/* 基础样式补充 */
input[type="radio"]:checked+span {
    color: #ca7599;
    font-weight: 500;
}

input[type="radio"]:checked {
    accent-color: #ca7599;
}
</style>